import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button} from 'antd';
import {
  WeaLeftRightLayout,
  WeaTab,
  WeaTop,
  WeaRightMenu,
  WeaPopoverHrm,
  WeaLocaleProvider
} from 'ecCom';
import {WeaTableNew} from 'comsMobx';
import MoreSearch from './MoreSearch';
import DateSelect from './DateSelect';
import LeftCom from './LeftCom';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;
import * as Util from '../../../util/Util';

@inject ('planResultListStore')
@observer
export default class Index extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      showSearchAd: false,
      showLeft: false,
      isrefesh: false,
      selectedKey: 1,
      topTab: [
        {
          title: getLabel('20617','月报'),
          viewcondition: '1',
        },
        {
          title: getLabel('20619','周报'),
          viewcondition: '2',
        },
      ],
      menu: [
        {
          key: '0',
          icon: <i className="icon-coms-search" />,
          content: getLabel('388113','搜索'),
          onClick: this.getTableData,
        },
        {
          key: 'BTN_COLUMN',
          icon: <i className="icon-coms-Custom" />,
          content: getLabel('32535','显示列定制') ,
          onClick: this.showColumn,
        },
      ],
      yearDatas: [],
      _height: Util.getCurrentHeight (),
      heightInit: false,
      currentSelectYear: '2019',
      currentSelectMonth: new Date ().getMonth () + 1,
      currentSelectWeek: this.getWeekOfYear (),
      tabSelectKey: '1',
      searchConditionItems: [],
      searchStatusSelectValue: '',
      searchStatusSelectValueAttr: '1',
      searchSubSelectValue: '',
      searchDepSelectValue: '',
      searchHumSelectValue: '',
      searchPlanNameValue: '',
      searchIncludeSubSelectValue: '',
      searchIncludeDepSelectValue: '',
      locationkey: new Date ().getTime (),
      monthWeekSelectComDisplayKey: '',
    };
    this.store = this.props.planResultListStore;
    this.scrollHeight = {y:this.state._height - 250};
  }
  render () {
    const {
      showSearchAd,
      menu,
      _height,
      topTab,
    } = this.state;

    const {tableStore, tabSelectKey, loading, moreSearchValues} = this.store;
    const weaTopConfig = {
     title: getLabel('509070','报告查询列表') ,
      icon: <i className="icon-coms-implement" />,
      iconBgcolor: 'rgb(150, 53, 138)',
      showDropIcon: true,
      dropMenuDatas: menu,
    };

    const weaTabConfig = {
      datas: topTab,
      searchType: ['advanced', 'base'],
      showSearchAd: showSearchAd,
      keyParam: 'viewcondition', //主键
      selectedKey: tabSelectKey,
      hideSearchAd: () => this.cancleSearchAd (),
      setShowSearchAd: bool => {
        this.setState ({
          showSearchAd: bool,
        });
      },
      buttonsAd: this.getTabButtonsAd (),
      searchsAd: this.getSearchsAd (),
      onChange: this.tabChange,
      searchsBaseValue: moreSearchValues.title,
      onSearch: () => {
        this.getTableData ();
      },
      onSearchChange: e => (this.store.moreSearchValues.title = e),
    };

    // const paginationConfig = {
    //   total: 1,
    //   onChange: this.showCurrentChange,
    //   showTotal: this.showTotal,
    //   current: 1,
    //   showQuickJumper: true,
    //   pageSize: 10,
    //   showSizeChanger: true,
    //   onShowSizeChange: this.onShowSizeChange,
    // };
    // const weaTableConfig = {
    //   scroll: {y: _height - 250},
    //   comsWeaTableStore: tableStore,
    //   hasOrder: true,
    //   needScroll: true,
    //   rowSelection: {
    //     selectedRowKeys: selectedRowKeys,
    //     onChange: this.onSelectChange,
    //   },
    //   onOperatesClick: this.onOperatesClick, //右键菜单操作
    // };
    return (
      <div
        onClick={this.onContextClick}
        className="wea-workrelate-plan-resultlist"
        style={{height: "100vh"}}
      >
        <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@i9aiq0`} />
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@xdnpjc`} datas={menu} showUrlItem={false} style={{height: '100%'}} collectParams={{
                    favname:getLabel (505885, '报告查询'),
                    favouritetype: 5,
                    link: '/spa/workrelate/static/index.html?#/main/workrelate/plan/planIndex?menutype=3',
                    importantlevel: 1,
                }}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@w8jjwi`} {...weaTopConfig} />
          <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@wp7bql`}
            isNew={true}
            showLeft={true}
            leftWidth={220}
            leftCom={<LeftCom ecId={`${this && this.props && this.props.ecId || ''}_LeftCom@mnh211`} />}
            showLeft={this.state.showLeft}
            onCollapse={showLeft => this.setState ({showLeft})}
          >
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@8ge4mx`} {...weaTabConfig} />
            <DateSelect ecId={`${this && this.props && this.props.ecId || ''}_DateSelect@wb048l`} />
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ywwvbp`}
            scroll={this.scrollHeight}
            comsWeaTableStore={tableStore}
            hasOrder={true}
            needScroll={true}
            onOperatesClick={this.onOperatesClick} //右键菜单操作
            />
          </WeaLeftRightLayout>
        </WeaRightMenu>
      </div>
    );
  }

  getWeekOfYear = () => {
    var today = new Date ();
    var firstDay = new Date (today.getFullYear (), 0, 1);
    var dayOfWeek = firstDay.getDay ();
    var spendDay = 1;
    if (dayOfWeek != 0) {
      spendDay = 7 - dayOfWeek + 1;
    }
    firstDay = new Date (today.getFullYear (), 0, 1 + spendDay);
    var d = Math.ceil ((today.valueOf () - firstDay.valueOf ()) / 86400000);
    var result = Math.ceil (d / 7);
    return result + 1;
  };

  showColumn = () => {
    const {planResultListStore: {tableStore}} = this.props;
    tableStore.setColSetVisible (true);
    tableStore.tableColSet (true);
  };

  componentWillMount () {
    //一些初始化请求
    this.store.resetMoreSearch ();
    this.store.getResultListTable ({refresh:1});
    //设置windowkey
    Util.setWindowKeys("3",getLabel (505885, '报告查询'));
  }


  //重置查询条件
  resetSearchAd () {
    this.store.resetMoreSearch ();

  }

  cancleSearchAd () {
    this.setState ({
      showSearchAd: false,
    });
  }
  getTabButtonsAd () {
    return [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rf4krr@search`} type="primary" onClick={() => this.searchResult ()}>{getLabel('388113','搜索') }</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tismwq@reset`} type="ghost" onClick={() => this.resetSearchAd ()}>{getLabel('2022','重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3cuhpp@cancel`} type="ghost" onClick={() => this.cancleSearchAd (false)}>
        {getLabel('31129','取消')}
      </Button>,
    ];
  }

  getSearchsAd = () => {
    return (
      <div className="condition-search-container">
        <MoreSearch ecId={`${this && this.props && this.props.ecId || ''}_MoreSearch@oip1cf`} onSearch={this.searchResult}/>
      </div>
    );
  };

  showTotal (total) {
    return `共 ${total} 条`;
  }
  showCurrentChange = current => {};
  onShowSizeChange = (current, pageSize) => {};

  searchResult = () => {
    this.store.getResultListTable ({refresh:1});
    this.cancleSearchAd ();
  };

  getTableData = () => {
    this.store.getResultListTable ();
  };

  doClose = val => {
    if (this.state.tabSelectKey == '1') {
      this.setState ({currentSelectMonth: val});
    } else {
      this.setState ({currentSelectWeek: val});
    }
    this.getTableData ();
  };



  tabChange = v => {
    this.store.tabSelectKey = v;
    this.store.locationkey = new Date ().getTime ();
    this.searchResult ();
  };

  onOperatesClick= (record, index, operate, flag)=> {
    let {dateSelect,tabSelectKey} = this.store;
    const {year, week, month} = dateSelect;
    if (operate.index == 0) {
      if(record.planid){
        window.open (operate.otherpara + record.planid);
      }else{
        let type2 = tabSelectKey=='1'?month:week
        window.open ("/spa/workrelate/static/index.html#/main/workrelate/plan/planView?year="+year+"&type1="+tabSelectKey+"&type2="+type2+"&resourceid="+record.id);
      }
    }
  }
  onContextClick = () => {
    this.store.locationkey = new Date ().getTime ();
    this.store.monthWeekSelectComDisplayKey = 'none';
  };

  onSubClick = (id, name) => {
    this.store.moreSearchValues['hrmIds'] = id;
    this.store.moreSearchValues['hrmnames'] = name;
    this.store.getResultListTable ();
  };
}